<template>
  <el-container>
    <el-header>
      <Header1></Header1>
    </el-header>
    <div
      style="height: 1px; background-color: grey; margin-top: 6px; opacity: 0.4"
    ></div>
    <div>
      <el-menu
        mode="horizontal"
        style="border: none; float: right; margin-right: 100px"
      >
        <el-menu-item
          index="1"
          style="
            border-left: 1px solid lightgrey;
            border-right: 1px solid lightgrey;
          "
          @click="$router.push('/myufun')"
          >我的优坊</el-menu-item
        >
        <el-menu-item index="1" style="border-right: 1px solid lightgrey" @click="$router.push('/myaddress')"
          >我的地址</el-menu-item
        >
        <el-menu-item index="2" style="border-right: 1px solid lightgrey" @click="$router.push('/myorder')"
          >我的订单</el-menu-item
        >
      </el-menu>
    </div>
    <div
      style="
        height: 1px;
        background-color: lightgrey;
        margin-top: 0px;
        opacity: 0.4;
      "
    ></div>
    <el-main>
      <div class="mytitle">
        <b>我的资料</b>
      </div>
      <div
        style="
          height: 1px;
          background-color: lightgrey;
          margin-top: 100px;
          opacity: 0.4;
        "
      ></div>
      <div class="mymessage">
        <div style="float: left; margin-top: 30px; margin-left: 25px">
          <b>个人信息</b>
        </div>
        <div style="margin-top: 80px; margin-left: 25px">
          <el-form ref="form" :model="user" label-width="80px">
            <el-form-item label="头像" style="text-align: left">
              <el-upload
                class="avatar-uploader"
                action="http://localhost:8008/user-service/user/setPhoto"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                style="margin-left:70px"
              >
                <img v-if="user.photo" :src="user.photo" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="UFunID" style="text-align: left">
              <span style="margin-left: 70px">{{ user.account }}</span>
            </el-form-item>
            <el-form-item label="性别">
              <el-select style="width: 75%" v-model="user.sex">
                <el-option
                  v-for="item in [
                    { value: '男', label: '男' },
                    { value: '女', label: '女' },
                  ]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                v-model="user.password"
                type="password"
                style="width: 75%"
                showpassword
              ></el-input>
            </el-form-item>
            <el-form-item label="真实姓名">
              <el-input style="width: 75%" v-model="user.realName"></el-input>
            </el-form-item>
            <el-form-item label="电话号码">
              <el-input style="width: 75%" v-model="user.phone"></el-input>
            </el-form-item>
            <el-form-item label="e-mail">
              <el-input style="width: 75%" v-model="user.email"></el-input>
            </el-form-item>
            <el-form-item label="支付账号">
              <el-input style="width: 75%" v-model="user.payAccount"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                style="float: right; margin-right: 80px"
                @click="update"
                >保存以上修改</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { getById, updateUser } from "@/api/user.js";
import { getItem, clearToken, clearItem } from "@/utils/localStorage.js";
import Header1 from "@/views/Header1.vue";
export default {
  components: { Header1 },
  data() {
    return {
      table: false,
      dialog: false,
      cart: false,
      options: [
        {
          value: "zhinan",
          label: "当季新品",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
      ],
      user: {

      },
    };
  },
  created() {
    getById(getItem("id")).then((res) => {
      if (res.data.code == "0000") {
        this.user = res.data.data;
      }
    });
  },
  methods: {
    handleAvatarSuccess(res) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      this.user.photo = res.data;
      console.log(res.data);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (file.type != "image/jpeg" && file.type != "image/png") {
        this.$message.error("上传头像图片只能是 JPG 或者PNG格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    outlogin() {
      clearToken();
      clearItem("account");
      clearItem("id");
      this.$router.push("/");
      this.$message.success("退出成功");
    },
    update() {
      updateUser(this.user).then((res) => {
        if (res.data.code == "0000") {
          this.$message.success("修改成功");
        }
      });
    },
    home(){
      this.$router.push("/")
    }
  },
};
</script>

<style lang="scss" scoped>
.el-header {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 60px;
  padding-bottom: 20px;
}
.head {
  display: fixed;
  height: 60px;
  text-align: left;
}
.head > div {
  float: left;
}
.head img {
  float: left;
  padding: 0;
  margin: 0;
}
.el-main {
  background-color: whitesmoke;
  color: #333;
  text-align: center;
  line-height: 100%;
  height: 1000px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.leftgoods {
  border-right: 1px solid gainsboro;
}
.dleftgoods {
  float: left;
  flex: 1;
  border-right: 1px solid gainsboro;
}
.dmidgoods {
  float: left;
  flex: 1;
  border-right: 1px solid gainsboro;
}
.drightgoods {
  float: left;
  flex: 1;
}
.parent {
  display: flex;
  height: 300px;
  border-bottom: 1px solid lightgray;
}
.parent > div {
  background-color: white;
}
.rightgoods > div {
  height: 50%;
}
.mytitle {
  float: left;
  font-size: 25px;
  margin-left: 100px;
  margin-top: 50px;
}
.mymessage {
  width: 650px;
  height: 750px;
  background-color: white;
  float: left;
  font-size: 20px;
  margin-left: 100px;
  margin-top: 50px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>